<template>
  <div>
    <!--工具类-->
    <Row  v-if="!isAutoVerify">
      <i-col span="24" style="text-align: right">
      <Button type="primary" icon="md-reorder"
              :disabled="selectedItems.length==0" @click="showBatchPass">批量通过审核
      </Button>
      </i-col>
    </Row>
    <hr>
    <Row v-if="!isAutoVerify">
      <i-col span="24" class-name="y_query_right" v-has=tRole.USER_3_101>
          <Input v-model.trim="searchParams.firstName" placeholder="请输入用户名称" clearable
                 class="y_condition"></Input>
          <Input v-model.trim="searchParams.contactEmail" placeholder="请输入邮箱" clearable
                 class="y_condition"></Input>
          <DatePicker @on-change="chooseDate" type="datetimerange" :value="searchParams.startEndDate" :options="dateRange"
                      placement="bottom-end" placeholder="选择日期" class="y_condition"
                      ></DatePicker>

          <Button type="primary" class="y_condition" icon="md-search" @click="search" >查询
          </Button>
          <span>&nbsp;</span>
      </i-col>
    </Row>


    <Row>
      <div class="tip_div"  >
        <strong>操作提示 :  </strong>
        <br><br>
        <p>现阶段审核功能形同虚设，已经临时改为自动审核。用户提交审核材料之后，系统会隔一会儿自动审核通过。原有的人工审核功能暂时移除。 </p>
      </div>
    </Row>


    <!--表格和分页-->
    <Table v-if="!isAutoVerify" stripe border ref="userInfo" :columns="tableTitles"
             @on-selection-change="selectItem" :data="userList" class="table_css" no-data-text="暂无数据" ></Table>

    <div v-if="!isAutoVerify" style="float: right;">
      <Page :total="tPage.total" :page-size="tPage.stepNumber" :current="tPage.currentPage" @on-change="changePage"
            @on-page-size-change="sizeChange" :page-size-opts="[40,60,80]"
            show-sizer show-elevator/>
    </div>

    <Modal
      v-model="status.modalImage.isShow"
      title=""
      :styles="{align:'center'}"
      :scrollable=true>
      <div slot="footer"></div>
      <div align="center"><Img :src="status.modalImage.url" style="max-width: 300px" /></div>
    </Modal>
    <Modal
      v-model="status.modalUserInfo.isShow"
      title="用户申请审核"
      :styles="{align:'center',width:'70%'}"
      :scrollable=true>
      <div slot="footer">
        <Row>
          <i-col span="24" style="margin-top: 10px">
            <div style="text-align: right">
              <Button type="error" class="tiy_btn" @click="verifyUser(112)"  v-has=tRole.USER_3_203>拒绝  </Button>
              <Button  type="success" class="tiy_btn" @click="verifyUser(100)" v-has=tRole.USER_3_202>通过</Button>
            </div>
          </i-col>
        </Row>
      </div>
      <div align="center">
        <div align="left" style="width: 80%;padding: 2rem 1rem">
          <Row style="margin-top: 8px">
            <i-col span="12">
              <span class="tiy_key">用户姓名 :</span> {{tData.userExtendInfo.name}}
            </i-col>
            <i-col span="12">
              <span class="tiy_key">采购用途 :</span> {{tData.userExtendInfo.useContent}}
            </i-col>
          </Row>
      <Row style="margin-top: 8px">
        <i-col span="12">
          <span class="tiy_key">FACEBOOK : </span> {{tData.userExtendInfo.facebook}}
        </i-col>
        <i-col span="12">
          <span class="tiy_key">INSTAGRAM :</span> {{tData.userExtendInfo.instagram}}
        </i-col>
      </Row>
          <Row style="margin-top: 8px">
        <i-col span="12">
          <span class="tiy_key">联系邮箱 :</span> {{tData.userExtendInfo.contactEmail}}
        </i-col>

            <i-col span="12" v-show="tData.userExtendInfo.facebook != ''">
              <span class="tiy_key">手机号 : </span>{{tData.userExtendInfo.phoneCode}}
            </i-col>

      </Row>
          <Row style="margin-top: 8px">

            <i-col span="12">
              <span class="tiy_key">客户来源 :</span> {{tData.userExtendInfo.source}}
            </i-col>
        <i-col span="12" v-show="tData.userExtendInfo.facebook != ''">
          <span class="tiy_key">邀请码 : </span>{{tData.userExtendInfo.inviteCode}}
        </i-col>

      </Row>
          <Row style="margin-top: 8px">
        <i-col span="12" v-show="tData.userExtendInfo.facebook != ''">
          <span class="tiy_key">是否允许推送 :</span> {{tData.userExtendInfo.isPushMessage==1?'是':'否'}}
        </i-col>
      </Row>
          <Row style="margin-top: 8px">
          <i-col span="24">
            <span class="tiy_key">拒绝理由 :</span> <Input type="textarea" :rows="3" style="width:70%" v-model="searchParams.verifyInfo.refusedReason" placeholder="仅限拒绝时填写"/>
          </i-col>
        </Row>
        <Row style="margin-top: 2em;">审核通过时选择要发放的VIP优惠券：</Row>
        <Row>
          <Table ref="verifyCouponDefine" stripe border :context="this" :columns="couponDefineTable" :data="tData.couponDefineList" class="base_table"
                 no-data-text="暂无数据" @on-selection-change="selectedChanged"></Table>
        </Row>
      </div>
      </div>
    </Modal>

    <!-- 注册用户和目标客户映射 -->
    <Modal v-model="allotModal.isShow" :scrollable=true
           :loading="allotModal.isLoading" title="注册用户分配"
           :styles="{width:'70%'}">
      <UserMatchCustomer ref="UserMatchCustomer"></UserMatchCustomer>
    </Modal>

    <Modal v-model="status.modalBatchVerfiy.isShow" title="批量审核用户"
           closable mask-closable :styles="{top: '20px',bottom:'20px',width:'60%',}">
      <div slot="footer">
        <Button type="primary" style="" @click="batchPass" >通过</Button>
      </div>
      <Row>审核通过时选择要发放的VIP优惠券：</Row>
      <Row>
        <Table ref="batchVerifyCouponDefine" stripe border :context="this" :columns="couponDefineTable" :data="tData.couponDefineList" class="base_table"
               no-data-text="暂无数据" @on-selection-change="selectedChanged"></Table>
      </Row>
    </Modal>

  </div>
<!--订单详情-->

</template>

<!--javascript 代码-->
<script>
  import ICol from "../../../node_modules/view-design/src/components/grid/col";
  import tiyData from "./js/verify/verify_data";
  import ACountrySelect from  "../user/CountrySelect.vue";
  import {
    init,
    webList,
    showVerifyUser,
    verifyUser,
    batchPass,
      getVipDefines
  } from "./js/verify/verify_funs";
  import UserMatchCustomer from "./UserMatchCustomer.vue";
  import matchData from "./js/userMatchCustomer/user_match_customer_data";
  import { userMatchList } from "./js/userMatchCustomer/user_match_customer_funs";

  export default {
    components: {ICol,ACountrySelect,UserMatchCustomer},

    data(){
      return {
        isAutoVerify:true,
        tRole:{
          USER_3_101:"USER-3-101",
          USER_3_201:"USER-3-201",
          USER_3_202:"USER-3-202",
          USER_3_203:"USER-3-203",
          USER_3_204:"USER-3-204"
        },
        tPage: tiyData.tPage,
        status: tiyData.tStatus,
        //搜索条件
        searchParams: tiyData.tParams,
        dateRange:tiyData.tData.dateRange,
        loginTypeDict: this.$store.getters.dictionaries.loginTypeDict,
        tData: tiyData.tData,
        userList: tiyData.tData.userList,
        tableTitles:tiyData.userTableTitles(this),
        selectedItems:tiyData.tData.selectedItems,
        allotModal:matchData.tStatus.allotModal,
          couponDefineTable:tiyData.couponDefineTable(this),
          couponTypeDict:this.$store.getters.dictionaries.couponType,
      }
    },
    computed : {

    },
    methods: {

      showVerifyUser(index){
        showVerifyUser(this, tiyData,index);
          this.$refs['verifyCouponDefine'].selectAll(false);
      },
      search(){
        tiyData.tPage.currentPage = 1;
        webList(this, tiyData);
      },
      changePage(page){
        tiyData.tPage.currentPage = page;
        webList(this, tiyData);
      },
      sizeChange(p){
        tiyData.tPage.stepNumber = p;
        webList(this, tiyData);
      },
      sortChange(column){
        tiyData.tPage.total = 1;
        tiyData.tPage.startIndex = 0;
        tiyData.tPage.stepNumber = 20;
        tiyData.tPage.currentPage = 1;
        if('normal' == column.order){
          tiyData.tParams.orderBy = '';
        }else{
          tiyData.tParams.orderBy = column.key +' '+ column.order;
        }
        webList(this,tiyData);
      },
      chooseDate(date){
        tiyData.tParams.startEndDate = date;
      },
      verifyUser(state){ //state 100通过 112拒绝
        if(112 == state && "" == tiyData.tParams.verifyInfo.refusedReason){
            this.$Modal.warning({
                title:"确认",
                content:"请输入拒绝理由"
            });
            return;
        }
        if(400 < tiyData.tParams.verifyInfo.refusedReason.length){
            this.$Modal.warning({
                title:"确认",
                content:"拒绝理由太长"
            });
            return;
        }
        let enabledCouponDefineLen = 0;
        tiyData.tData.couponDefineList.forEach(function(item){
            if(item.state === 0){
                enabledCouponDefineLen++;
            }
        });
        let self = this;
        // if(state == 100){//审核通过时发放vip优惠券
            tiyData.tParams.verifyInfo.state = state;
            if(state == 100 && tiyData.tParams.selectedCouponDefines.length <= 0 && enabledCouponDefineLen > 0){ //没有选择可用的vip优惠券需提示
                this.$Modal.confirm({
                    title:"确认",
                    content:"确定不需要同时发放VIP优惠券？",
                    onOk: () => {
                        verifyUser(self, tiyData);
                    }
                });
            } else {
                verifyUser(self, tiyData);
            }
        // }
      },
      selectItem(selection){
        tiyData.tData.selectedItems.splice(0,tiyData.tData.selectedItems.length);
        selection.forEach(function(item){
          tiyData.tData.selectedItems.push(item.id);
        });
      },
      batchPass(){
          let enabledCouponDefineLen = 0;
          tiyData.tData.couponDefineList.forEach(function(item){
              if(item.state === 0){
                  enabledCouponDefineLen++;
              }
          });
          if(tiyData.tParams.selectedCouponDefines.length <= 0 && enabledCouponDefineLen > 0){ //没有选择可用的vip优惠券需提示
              this.$Modal.confirm({
                  title:"确认",
                  content:"确定要批量通过，并且不需要同时发放VIP优惠券？",
                  onOk: () => {
                      batchPass(this,tiyData);
                  }
              });
          } else {
              this.$Modal.confirm({
                  title: "确认",
                  content: "确定要批量通过吗？",
                  onOk: () => {
                      batchPass(this, tiyData);
                  }
              });
          }
      },
      allotUserShow(index){
        userMatchList(this, matchData, tiyData.tData.userList[index]);
      },
      refreshList(){//刷新列表，用于分配子组件调用。
        webList(this, tiyData);
      },
        selectedChanged(selection){
            tiyData.tParams.selectedCouponDefines = selection;
        },
        showBatchPass(){
            this.$refs['batchVerifyCouponDefine'].selectAll(false);
          tiyData.tParams.selectedCouponDefines.splice(0, tiyData.tParams.selectedCouponDefines.length);
          tiyData.tStatus.modalBatchVerfiy.isShow = true;
        }
    },
    mounted(){
      init(this, tiyData);
      // webList(this, tiyData);
        getVipDefines(this, tiyData);
    }
  }
</script>

<!--css样式-->
<style scoped lang="less">
  @import  (once,optional)  "../css/base.less";

  .table_css {
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .modal_newuser_form {
    padding-left: 60px;
    padding-top: 30px;
    padding-bottom: 30px;
  }

  .modal_newuser_form_input {
    width: 180px;
    margin-right: 10px;
  }
  .modal_active_form{
    padding-top: 30px;
    padding-bottom: 30px;
  }
  .tiy_key {
    color: #9e9e9e;
    min-width: 90px;
    display: inline-block;
    text-align: right;
    padding-right: 0.5rem;
  }
</style>
